<script setup lang="ts">
    import { ref } from 'vue';

    const num1 = ref<number>(0);
    const num2 = ref<number>(0);
    const result = ref<number>(0);

    function calculate(): void {
        result.value = num1.value + num2.value;
    }
</script>

<template>
    <div class="text-center mt-5">
        <h1>加法计算器</h1>
        <input v-model.number="num1" type="number" placeholder="输入第一个数字" />
        <span>+</span>
        <input v-model.number="num2" type="number" placeholder="输入第二个数字" />
        <button @click="calculate" class="btn btn-primary">计算</button>
        <h2>结果：{{ result }}</h2>
    </div>
</template>